<template>
  <div class="EmergencyDetail">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>应急日报详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="EmergencyDetail-center">
      <TimeLine :activities="activities" :title="'应急事件流程'" />
      <div class="EmergencyDetail-add">
        <div class="InformationDetail-btn">
          <el-button size="mini" @click="AddFh">返回</el-button>
        </div>
        <div class="EmergencyDetail-titel">
          <div class="EmergencyDetail-top">{{ dailyName }}</div>
          <div class="EmergencyDetail-top">{{ dailyNames }}</div>
        </div>
        <div class="InformationDetail-btns">
          <div class="information_Sources_content">
            <div class="task_distribution">
              <div>{{ ditelist.creatorUnit }}</div>
              <div>{{ ditelist.createTime }}</div>
            </div>
          </div>
        </div>
        <div class="EmergencyDetail-zt">
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">总体情况</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('1') !== -1 ? 'downArrow1' : 'downArrow2'" />
                </div>
              </div>
              <div class="information_Sources_content">
                <div class="task_distribution">
                  <div>{{ ditelist.overAll }}</div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="2">

              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">应急处置情况</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('2') !== -1 ? 'downArrow1' : 'downArrow2'" />
                </div>
              </div>
              <div class="information_Sources_content">
                <div class="task_distribution">
                  <div>{{ ditelist.emergencySituation }}</div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="3">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">天气预报情况</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('3') !== -1 ? 'downArrow1' : 'downArrow2'" />
                </div>
              </div>
              <LsdTable :compRef="WeatherForecast.compRef" ref="gjxm" :autoHeight="WeatherForecast.autoHeight"
                :columns="WeatherForecast.columns" :title="WeatherForecast.title" :tableData="WeatherForecast.tableData"
                :tableAttr="WeatherForecast.tableAttr" :isShowPage="WeatherForecast.isShowPage"
                :isSelectFlag="WeatherForecast.isSelectFlag" :isSequenceFlag="WeatherForecast.isSequenceFlag" />
            </el-collapse-item>
            <el-collapse-item name="4">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">附表1-灾情信息统计表</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('4') !== -1 ? 'downArrow1' : 'downArrow2'" />
                </div>
              </div>
              <LsdTable :compRef="tables.compRef" ref="gjxm" :columns="tables.columns" :autoHeight="tables.autoHeight"
                :title="tables.title" :tableData="tables.tableData" :tableAttr="tables.tableAttr"
                :isShowPage="tables.isShowPage" :isSelectFlag="tables.isSelectFlag"
                :isSequenceFlag="tables.isSequenceFlag" />
            </el-collapse-item>
            <el-collapse-item name="5">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">附表2-资源投入统计表</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('5') !== -1 ? 'downArrow1' : 'downArrow2'" />
                </div>
              </div>
              <LsdTable :compRef="UnitInput.compRef" ref="gjxm" :columns="UnitInput.columns"
                :autoHeight="UnitInput.autoHeight" :title="UnitInput.title" :tableData="UnitInput.tableData"
                :tableAttr="UnitInput.tableAttr" :isShowPage="UnitInput.isShowPage" :isSelectFlag="UnitInput.isSelectFlag"
                :isSequenceFlag="UnitInput.isSequenceFlag" />
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeLine from "@/components/component/timeLine.vue";
import { getByIdEmergencyDaily, selectEmergencyDaily, getFlowList } from "@/api/EmergencyDisposal/yjrb.js";
import { tables, UnitInput, WeatherForecast } from "./config";
export default {
  name: "EmergencyDetail",
  components: { TimeLine },
  data() {
    return {
      tables: tables, // 应急日报表格配置
      UnitInput: UnitInput, // 各单位投入情况表格配置
      WeatherForecast: WeatherForecast, // 天气预报情况表格配置
      activeNames: ["1", "2", "3", "4", "5"],
      activities: [],
      ditelist: {},
      dailyName: "",
      dailyNames: ""
    };
  },
  mounted() {
    this.detailList();
  },
  methods: {
    judgeActive(data) {
      return this.activeNames.indexOf(data);
    },
    async detailList() {
      const res = await getByIdEmergencyDaily(
        { id: this.$route.query.id });
      this.ditelist = res;
      // this.dailyName = res.dailyName.substring(0, 43)
      // this.dailyNames = res.dailyName.substr(-9, 9)
      this.WeatherForecast.tableData = res.weatherForecast;

      this.dailyName = res.sourceInfo;
      this.dailyNames = res.dailyName;
      selectEmergencyDaily({ responseId: res.sourceInfoId }).then(res => {
        this.tables.tableData = res.baseContent;
        this.UnitInput.tableData = res.unitInputs;
      });
      getFlowList({ emergencyId: res.emergencyId }).then(res => {
        this.activities = res;

      });
    },

    // 返回上一级
    AddFh() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped lang="less">
.EmergencyDetail {
  width: 100%;
  height: 100%;

  :deep(.el-timeline) {
    width: 85%;
    margin-left: 35px;
    margin-top: 30px;
  }

  :deep(.el-collapse-item__arrow) {
    display: none;
  }

  .title_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .downArrow1 {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url("../../../assets/img/downArrow1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .downArrow2 {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: url("../../../assets/img/downArrow1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: rotate(-180deg);
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  .information_Sources_content {
    font-size: 16px !important;
  }

  .EmergencyDetail-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .EmergencyDetail-add {
      width: 83%;
      height: 100%;
      background-color: #fff;
      border-radius: 5px;
      position: relative;

      // padding: 0 10px;
      // .EmergencyDetail-titel {
      //   display: flex;
      //   justify-content: center;
      // }
      .InformationDetail-btn {
        width: 98%;
        margin: 0 auto;
        height: 50px;
        // position: absolute;
        // right: 5px;
        line-height: 50px;
        border-bottom: #e0e0e0 1px solid;
        // bottom: 5px;
        text-align: right;
      }

      .EmergencyDetail-titel {
        width: 98%;
        margin: 0 auto;
        padding: 20px 0;

        .EmergencyDetail-top {
          width: 80%;
          margin: 0 auto;
          text-align: center;
          font-family: 微软雅黑;
          font-weight: 600;
          font-style: normal;
          font-size: 28px !important;
        }
      }

      .InformationDetail-btns {
        width: 98%;
        padding: 10px 0;
        margin: 0 auto;
        border-bottom: solid 2px red;

        .task_distribution {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0px 10px;
        }
      }

      .EmergencyDetail-zt {
        width: 98%;
        height: 70%;
        overflow-y: auto;
        margin: 0 auto;

        :deep(.el-button--text) {
          color: #606266;
          padding: 2px;
        }

        .EmergencyList-dialog-form-item {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
        }

        .leftLine {
          width: 6px;
          height: 20px;
          background: #236dfe;
          border-radius: 4px;
          margin: auto 8px auto 0;
        }

        .task_distribution {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 30px 20px 30px;
        }
      }
    }
  }
}</style>
